<div class="container-tight py-4">
    <div class="text-center m-4">
        <a href="."><img src="/mix-app/css/portal/img/mixcore-logo-red-2.svg" alt="Mixcore CMS" height="36"></a>
    </div>
    <div class="card card-md">
        <div class="card-body text-center py-4 p-sm-5">
            <img src="/mix-app/css/portal/img/illustrations/undraw_secure_login_pdn4.svg" height="128" class="mb-n2"
                height="120" alt="">
            <h1 class="mt-5">Portal</h1>
            <p class="text-muted">Let manage your site together!</p>
        </div>
        <div class="hr-text hr-text-center hr-text-spaceless">login form</div>
        <div class="card-body p-5">

            <form class="mb-3 frm-login" action="" ng-class="{'submitted': submitted}" ng-submit="login()">

                <div class="form-body" ng-if="canLogin">
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input class="form-control" placeholder="Username" ng-model="loginData.username" required
                            autofocus="" ng-enter="login()" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label"> Password </label>

                        <input type="password" class="form-control" placeholder="Password" ng-model="loginData.password"
                            required ng-enter="login()" />
                        <a href="/security/forgot-password" class="float-end small">Forgot password?</a>
                    </div>
                    <div class="mb-3 mt-4 mb-5">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input" ng-model="loginData.rememberMe" />
                            <span class="form-check-label">Remember me!</span>
                        </label>
                    </div>
                    <!-- <hr> -->
                </div>
                <div class="form-footer text-center">
                    <fb-login logout-callback="logOut()" login-callback="externalLogin(resp, 'Facebook')"></fb-login>
                    <button ng-if="canLogin" ng-click="login()" type="button" class="btn btn-primary btn-block px-5">
                        Login
                    </button>
                    <p class="text-danger ng-binding" ng-bind="error"></p>
                    <div>
                        <button ng-click="goToSiteUrl('/')" type="button" class="btn btn-link">
                            Homepage
                        </button>
                        |
                        <button ng-click="goToSiteUrl('/security/register')" type="button" class="btn btn-link">
                            Register
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>